<template>
  <div>
    <Modal
      v-model="modals"
      width="700"
      scrollable
      closable
      :title="titleFrom"
      :mask-closable="false"
      :z-index="1"
      @on-cancel="handleReset"
	  @on-confirm="handleSubmit"
      @on-visible-change="visible"
    >
      <Form ref="formValidate" :model="formValidate" :label-width="110" :rules="ruleValidate" @submit.native.prevent>
        
        <Row type="flex" :gutter="24">
			<Col v-bind="grid">
				<FormItem label="款项名称：" prop="name">
					 <Select v-model="formValidate.name" placeholder="请选择款项名称" element-id="name" clearable>
						<Option v-for="(item, j) in fouds" :value="item.value" :key="j">{{ item.label }} </Option>
					 </Select>
				</FormItem>
			</Col>
			<Col v-bind="grid">
			  <FormItem label="款项金额：" prop="amount">
			    <Input v-model="formValidate.amount" placeholder="请输入款项金额"></Input>
			  </FormItem>
			</Col>
          <Col v-bind="grid">
            <FormItem label="预计时间：" prop="pay_start">
				<DatePicker
				  class="form-sty"
				  type="date"
				  :value="formValidate.pay_start"
				  placeholder="请选择预计支付时间"
				  style="width: 100%"
				  format="yyyy-MM-dd"
				  @on-change="formValidate.pay_start = $event"
				></DatePicker>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="支付时间：" prop="pay_time">
			    <DatePicker
			      class="form-sty"
			      type="date"
			      :value="formValidate.pay_time"
			      placeholder="请选择支付时间"
			      style="width: 100%"
			      format="yyyy-MM-dd"
			      @on-change="formValidate.pay_time = $event"
			    ></DatePicker>
            </FormItem>
          </Col>
          <Col v-bind="grid">
          	<FormItem label="状态：" prop="name">
          		 <Select v-model="formValidate.status" placeholder="请选择状态" element-id="name" clearable>
          			<Option v-for="(item, j) in status" :value="item.value" :key="j">{{ item.label }} </Option>
          		 </Select>
          	</FormItem>
          </Col>
          <Col :xs="24">
            <FormItem label="备注：">
              <Input
                placeholder="请输入备注"
                type="textarea"
                :rows="4"
                element-id="remark"
                v-model="formValidate.remark"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
	  <div slot="footer">
	    <Button @click="cancel()">取消</Button>
	    <Button type="primary" @click="handleSubmit()">保存</Button>
	  </div>
    </Modal>
    <Modal v-model="modal12" scrollable width="600" title="图标选择" footer-hide>
      <Input
        v-model="iconVal"
        placeholder="输入关键词搜索,注意全是英文"
        clearable
        style="width: 300px"
        @on-change="upIcon(iconVal)"
        ref="search"
      />
      <div class="trees-coadd">
        <div class="scollhide">
          <div class="iconlist">
            <ul class="list-inline">
              <li class="icons-item" v-for="(item, i) in list" :key="i" :title="item.type">
                <Icon :type="item.type" @click="iconChange(item.type)" class="ivu-icon" />
              </li>
            </ul>
          </div>
        </div>
      </div>
    </Modal>
    <Modal v-model="ruleModal" scrollable width="1100" title="权限列表" footer-hide @on-visible-change="modalchange">
      <div class="search-rule">
        <Input
          class="mr10"
          v-model="searchRule"
          placeholder="输入关键词搜索"
          clearable
          style="width: 300px"
          ref="search"
        />
        <Button class="mr10" type="primary" @click="searchRules">搜索</Button>
        <Button @click="init">重置</Button>
      </div>
      <div class="rule">
        <div
          class="rule-list"
          v-show="!arrs.length || arrs.includes(index)"
          :class="{ 'select-rule': arrs.includes(index) }"
          v-for="(item, index) in ruleList"
          :key="index"
          @click="selectRule(item)"
        >
          <div>接口名称：{{ item.real_name }}</div>
          <div>请求方式：{{ item.method }}</div>
          <div>接口地址：{{ item.rule }}</div>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
import { addMenusApi, addMenus, getRuleList } from '@/api/systemMenus';
import { saveApi} from '@/api/foud';
import { listCatesApi} from '@/api/cate';
import icon from '@/utils/icon';
import { getCookies } from '@/libs/util';
export default {
  name: 'menusFrom',
  props: {
    formValidate: {
      type: Object,
      default: null,
    },
    titleFrom: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      arrs: [],
      searchRule: '',
      iconVal: '',
      grid: {
        xl: 12,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      modal12: false,
      ruleValidate: {
        name: [{ required: true, message: '请选择款项名称', trigger: 'change', type: 'number'}],
		status: [{ required: true, message: '请选择状态', trigger: 'change', type: 'number'}],
      },
      contracts: [],
      users: [],
      status: [],
      valids: false,
      list2: [],
      list: icon,
      authType: true,
      search: icon,
      ruleModal: false,
      ruleList: [],
	  header: {},
      fileUrl: '/adminapi/file/upload_file/1',
	  files:[],
	  fouds:[],
	  status:[]
    };
  },
  watch: {
    'formValidate.header': function (n) {
      this.formValidate.is_header = n ? 1 : 0;
    },
    'formValidate.auth_type': function (n) {
      if (n === undefined) {
        n = 1;
      }
      this.authType = n === 1;
    },
    'formValidate.data': function (n) {},
  },
  computed: {
    /* eslint-disable */
    optionsList() {
      let a = [];
      this.FromData.map((item) => {
        if ('pid' === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    headerOptionsList() {
      let a = [];
      this.FromData.map((item) => {
        if ('header' === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    optionsListmodule() {
      let a = [];
      this.FromData.map((item) => {
        if ('module' === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    optionsRadio() {
      let a = [];
      this.FromData.map((item) => {
        if ('auth_type' === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    isheaderRadio() {
      let a = [];
      this.FromData.map((item) => {
        if ('is_header' === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    isShowRadio() {
      let a = [];
      this.FromData.map((item) => {
        if ('is_show' === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    isShowPathRadio() {
      let a = [];
      this.FromData.map((item) => {
        if ('is_show_path' === item.field) {
          a = item.options;
        }
      });
      return a;
    },
    menuList() {
      let a = [];
    //   this.FromData.map((item) => {
		  // console.info(item)
    //     a[] = item;
    //   });
      return  this.FromData;
    },
  },
  methods: {
	  // 上传成功
	  handleSuccess(res, file) {
	    if (res.status === 200) {
	  	this.files.push(res.data.data);
	      this.$Message.success(res.msg);
	    } else {
	      this.$Message.error(res.msg);
	    }
	  },
	  handleFormatError(file) {
	  	
	  },
	  handleMaxSize(file) {
	    this.$Message.warning('请上传文件30M以内的文件');
	  },
	  delFile(index){
	  	this.files.splice(index,1);
	  },
	  // 上传头部token
	  getToken() {
	    this.header['Authori-zation'] = 'Bearer ' + getCookies('token');
	    console.info(this.header);
	  },
    // 获取权限列表
    getRuleList() {
      getRuleList().then((res) => {
        this.ruleList = res.data;
        this.ruleModal = true;
      });
    },
    modalchange(type) {
      if (!type) {
        this.arrs = [];
        this.ruleModal = '';
        this.ruleModal = false;
      }
    },
    visible(type) {
      if (!type) {
        this.authType = true;
      }
    },
    selectRule(data) {
      this.$emit('selectRule', data);
      this.$nextTick((e) => {
        this.ruleModal = false;
      });
    },
    changeRadio(n) {
      this.authType = n === 1 ? true : false;
    },
    // 搜索
    upIcon(n) {
      let arrs = [];
      for (var i = 0; i < this.search.length; i++) {
        if (this.search[i].type.indexOf(n) !== -1) {
          arrs.push(this.search[i]);
          this.list = arrs;
        }
      }
    },
    // 搜索规则
    searchRules() {
      if (this.searchRule.trim()) {
        this.arrs = [];
        for (var i = 0; i < this.ruleList.length; i++) {
          if (this.ruleList[i].real_name.indexOf(this.searchRule) !== -1) {
            this.arrs.push(i);
          }
        }
      } else {
        this.arrs = [];
      }
    },
    init() {
      this.searchRule = '';
      this.arrs = [];
    },
    handleCreate1(val) {
      this.headerOptionsList.push({
        value: val,
        label: val,
      });
    },
    // 获取客户数据
    getAddFrom() {
		let that = this;
        listCatesApi({'codes':'PRO_FOUD,CONTRACT_FOUD_STATUS'})
        .then(async (res) => {
          that.fouds = res.data['PRO_FOUD'];
          that.status = res.data['CONTRACT_FOUD_STATUS'];
        })
        .catch((res) => {
          this.$Message.error(res.msg);
        });
    },
    iconClick() {
      this.modal12 = true;
    },
    iconChange(n) {
      this.formValidate.icon = n;
      this.modal12 = false;
    },
	cancel(){
		this.modals = false;
	},
    // 提交
    handleSubmit() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.valids = true;
          saveApi(this.formValidate)
            .then(async (res) => {
              this.$Message.success(res.msg);
              this.modals = false;
              this.$emit('getFoud');
            })
            .catch((res) => {
              this.$Message.error(res.msg);
            });
        } else {
          if (!this.formValidate.name) return this.$Message.error('请选择款项名称！');
        }
      });
    },
    handleReset() {
      this.modals = false;
      this.authType = true;
      this.$refs['formValidate'].resetFields();
      this.$emit('clearFrom');
    },
  },
  created() {
    this.list = this.search;
    this.getToken();
    this.getAddFrom();
  },
};
</script>

<style scoped>
.trees-coadd {
  width: 100%;
  height: 500px;
  border-radius: 4px;
  overflow: hidden;
}
.scollhide {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin-left: 18px;
  padding: 10px 0 10px 0;
  box-sizing: border-box;
}
.content {
  font-size: 12px;
}

.time {
  font-size: 12px;
  color: #2d8cf0;
}

.icons-item {
  float: left;
  margin: 6px 6px 6px 0;
  width: 53px;
  text-align: center;
  list-style: none;
  cursor: pointer;
  height: 50px;
  color: #5c6b77;
  transition: all 0.2s ease;
  position: relative;
  padding-top: 10px;
}
.icons-item .ivu-icon {
  font-size: 16px;
}
.search-rule {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #f2f2f2;
}
.rule {
  display: flex;
  flex-wrap: wrap;
  max-height: 700px;
  overflow: scroll;
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.rule::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #f5f5f5;
}

/*定义滚动条轨道 内阴影+圆角*/
.rule::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: #f5f5f5;
}

/*定义滑块 内阴影+圆角*/
.rule::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #555;
}
.rule-list {
  background-color: #f2f2f2;
  width: 32%;
  margin: 5px;
  border-radius: 3px;
  padding: 10px;
  color: #333;
  cursor: pointer;
  transition: all 0.1s;
}
.rule-list:hover {
  background-color: #c5d1dd;
}
.rule-list div {
  white-space: nowrap;
}
.select-rule {
  background-color: #c5d1dd;
}
.add {
  display: flex;
  align-items: center;
}
.df {
  display: flex;
  justify-content: center;
}

.file{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.file:hover{
	background-color: #edf7fe;
}
.close-bg{
	display: inline-block;
	width: 35px;
	height: 35px;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-right: 15px;;
}

.close-bg:hover{
	cursor: pointer;
}

.close {
	display: inline-block;
	width: 15px;
	height: 2px;
	background: red;
	transform: rotate(45deg);
}

.close::after {
	content: '';
	display: block;
	width: 15px;
	height: 2px;
	background: red;
	transform: rotate(-90deg);
}

</style>
